<template>
 <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>

        <el-col :span="8">
          <el-form-item :label="$t('m.log.logtype')">
            <el-select v-model="formInline.typeid">
              <el-option
                v-for="(item,index) in typeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model.trim="formInline.ordercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.log.ifsuccess')">
            <el-select v-model="formInline.ifsuccess">
              <el-option
                v-for="(item,index) in stateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.log.synchrotime')" class="date-picker">
            <el-date-picker
              v-model="syncDate"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              :start-placeholder="$t('m.otherstore.startdate')"
              :end-placeholder="$t('m.otherstore.enddate')"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24" align="right">
          <el-button type="primary" v-if="hasPermission('search')" @click="search">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fits
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
    >
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="typeid" :label="$t('m.log.logtype')">
        <template slot-scope="scope">
        {{scope.row.typeid|typeFilters}}
      </template>
      </el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.in.ordernumber')"></el-table-column>
       <el-table-column show-overflow-tooltip align="center" prop="orderdata" :label="$t('m.log.orderdata')"></el-table-column>
       <el-table-column align="center" prop="returnmsg" :label="$t('m.log.returnmsg')"></el-table-column>
      <el-table-column width="200" align="center" prop="synchrotime" :label="$t('m.log.synchrotime')"></el-table-column>
      <el-table-column width="150" align="center" prop="ifsuccess" :label="$t('m.log.ifsuccess')">
      <template slot-scope="scope">
        {{scope.row.ifsuccess|stateFilters}}
      </template>
      </el-table-column>
      <el-table-column align="center" prop="errormsg" :label="$t('m.log.errormsg')"></el-table-column>
    </el-table>
    <!-- table数据展示 end -->
    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChangeInitFn"
      @size-change="handleSizeChangeInitFn">
    </el-pagination>
  </div>
</template>
<script>
import common from '@/utils/common'
let __this
export default {
  name:'async-component',
  data(){
    return {
      formInline:{
        typeid:3, //日志类型
        ordercode:'', //订单号
        ifsuccess:'' //是否成功
      },
      tableData:[],
      syncDate:[] // 同步时间
    }
  },
  beforeCreate(){
    __this = this
  },
  computed:{
    typeOptions(){
      return[
        // 日志类型
        { label:this.$t('m.all'), value:''},
        { label:this.$t('m.log.oms'), value:3 },
        { label:this.$t('m.log.pick'), value:4 },
        { label:this.$t('m.log.send'), value:5 }
      ]
    },
    stateOptions(){
      return[
        // 状态
        { label:this.$t('m.all'), value:'' },
        { label:this.$t('m.log.success'), value:0 },
        { label:this.$t('m.log.error'), value:1}
      ]
    },
    dateRange(){
      let [synchrobegintime, synchroendtime] = this.syncDate || Array.from(2)
      if(!synchrobegintime&&!synchroendtime){
        return ''
      } else {
        return {
          synchrobegintime, //同步时间-start
          synchroendtime //同步时间--end
        }
      }
    }
  },
  mounted(){
    this.init()
  },

  components:{
  },
  filters:{
    stateFilters(value){
      let result = __this.stateOptions.find(item => item.value === value)
      return result?result.label:''
    },
    typeFilters(value){
      let result = __this.typeOptions.find(item => item.value === value)
      return result?result.label:''
    }
  },
  methods:{
    search(){
      this.page = 1
      this.init()
    },
    init(){
      this.tableLoading = true
      let formInline = this.cloneObject(this.formInline)
      if(this.dateRange) Object.assign(formInline,this.dateRange)
      this.$axios({
        method:'get',
        url:'/synchrolog/page',
        params:{
          page:this.page,
          rows:this.rowSize,
          ...formInline
        }
      }).then(({ data }) => {
        data.records.forEach(element => {
          element.synchrotime = common.timestampToTime(element.synchrotime)
        })
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>